<template>
  <div class="sendFile">
    <h3>图片、文件上传</h3>
    <div class="progress_box">
      <div class="progress" :style="'width:' + 20 + '%'"></div>
    </div>
    imgList:{{imgList}}
    <br />
    <ImageUpload :multiple="true" :limit="3" v-model:imgList="imgList" />
    <br />
    <div class="progress_box">
      <div class="progress" :style="'width:' + 20 + '%'"></div>
    </div>
    <br />
    <h3>文件上传</h3>
    <FileUpload></FileUpload>
  </div>
</template>

<script setup>
// 图片上传组件
import ImageUpload from '../components/ImageUpload.vue';
//文件上传
import FileUpload from '../components/FileUpload.vue';
import { ref } from 'vue';
let imgList=ref([]);
imgList=['http://192.168.0.189:3000/public/images/1678906951830.jpg','http://192.168.0.189:3000/public/images/1678906956276.jpg'];
</script>

<style lang="scss" scoped>
@use '@/styles/mixin' as Minxs;
.sendFile {
  @include Minxs.mainWidth;
  background-color: #f2f2f2;
  padding: 16px;

  .progress_box {
    background-color: #a49a9a;
    width: 100%;
    height: 2px;
    .progress {
      height: 100%;
      background-color: #f40;
    }
  }
}
</style>
